<template>
    <div style="display:flex">
        <div>
            <img :src="phoneDetail.image ? phoneDetail.image[colorButton] : '' " style="width:450px;height:450px;" />
        </div>
        <div>
            <div class="rows des">{{phoneDetail.description}}</div>
            <div class="rows">价格：<span style="color:red;font-size:22px;">￥{{phoneDetail.price}}</span></div>
            <div class="rows">型号：{{phoneDetail.type}}</div>
            <div class="rows">Rom：{{phoneDetail.rom}}</div>
            <div class="rows">Ram：{{phoneDetail.ram}}</div>
            <div class="rows">系统：{{phoneDetail.os}}</div>
            <div class="rows">重量：{{phoneDetail.weight}}</div>
            <div class="rows">
                <span>颜色：</span>
                <RadioGroup v-model="colorButton" type="button">
                    <Radio v-for="(item, index) in phoneDetail.color" :key="item" :label="index">{{item}}</Radio>
                </RadioGroup>
            </div>
            <div class="rows"><Button type="primary" @click="onAdd">加入购物车</Button></div>
        </div>
    </div>

</template>


<script>
import service from "@/service"
import { mapActions } from 'vuex'
export default {
  name: "detail",
  data() {
      return{
        phoneDetail: {},
        colorButton: 0
      }
  },
  created() {
    service.get('v1/home/phoneDetail?id=' + this.$route.query.id)
    .then((res) => {
      console.log(res);
      this.phoneDetail = res;
    })
  },
  methods:{
      ...mapActions(['increase', 'addProduct']),
      onAdd(){
         this.increase()
         this.addProduct({
             brand: this.phoneDetail.brand,
             type: this.phoneDetail.type,
             price: this.phoneDetail.price,
             image: this.phoneDetail.image[this.colorButton],
             color: this.phoneDetail.color[this.colorButton],
         })
      }
  }
};
</script>

<style lang="scss" scoped>
.rows {
  font-size: 16px;
  margin: 20px 0;
  text-align: left;
}
.des {
  font-size: 20px;
}
</style>